iT邦幫忙

2023 iThome 鐵人賽

DAY 3
0
Software Development

ASP.NET MVC基礎修練:從菜開始系列 第 3

Day-03 ASP.NET MVC 之強型別Strongly Typed Views

  • 分享至 

  • xImage
  •  

轉換為 IEnumerable< T >類型

現在用個實例,實現將一個列表數據呈現在UI中,這就會用到巡訪。
首先在 Models 文件夾下創建一個類別文件 BoxViewModels.cs,在
其中添加一個 Name 屬性,如下程式碼:
https://ithelp.ithome.com.tw/upload/images/20230918/20106640tl7APtxRbt.jpg

https://ithelp.ithome.com.tw/upload/images/20230918/2010664025fOW3OHAh.jpg

然後在控制器中建一個列表,並添加到 ViewBag 中。
在 BoxController控制器中加入引用MVC30day.Models,
如下程式碼:
https://ithelp.ithome.com.tw/upload/images/20230918/20106640cxGb5LLdDt.jpg

然後在控制器的程式碼中,我們在 nameList 列表中添加了 3 筆資料。然後
將 nameList 列表中指定值給 ViewBag 的 namelilist屬性,這樣該屬
性可以在頁面中巡訪到。
https://ithelp.ithome.com.tw/upload/images/20230918/20106640dccBeqHFIQ.jpg

  public ActionResult Index()
        {
            List<BoxModel> namelilist = new List<BoxModel>();
            namelilist.Add(new BoxModel() { Name = "John" });
            namelilist.Add(new BoxModel() { Name = "Nash" });
            namelilist.Add(new BoxModel() { Name = "Leo" });
            ViewBag.NameList = namelilist;
            ViewBag.Name = "model";
            return View();
        }

最後在頁面 Views/Box/Index.cshtml 中寫程式碼如下:

@using System.Collections.Generic;
@using MVC30day.Models;

@model IEnumerable<BoxModel>

<h2>Index</h2>
<h3>@ViewBag.Name</h3>
<table>
    <tr>
        <td>姓名</td>
    </tr>

    @foreach (var item  in ViewBag.namelist)
    {
        <tr>
            <td>
                @item.Name
            </td>
        </tr>
    }
</table>

https://ithelp.ithome.com.tw/upload/images/20230918/20106640NlT0dRwkTz.jpg

執行結果如下圖
https://ithelp.ithome.com.tw/upload/images/20230918/201066405ZhM2CtDdQ.jpg

在這裡使用了 foreach 語句,

只需要在該語句前面加上@,就可以
在頁面中使用 C#中的 foreach 語句了。

換另外一種寫法

由於引入了

@model IEnumerable<MVC30day.Models.BoxModel>

將 ViewBag.namelist 改成 Model 就會出現智能提示
https://ithelp.ithome.com.tw/upload/images/20230918/20106640ODWV8eWgvL.jpg

並且把 BoxController
的 return View(); 改成
return View(namelist);

https://ithelp.ithome.com.tw/upload/images/20230918/20106640vaa8m0AIZk.jpg


上一篇
Day-02 ASP.NET MVC 之 ViewBag
下一篇
Day-04 ASP.NET MVC 之-Razor 語法
系列文
ASP.NET MVC基礎修練:從菜開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言